
<template>
  <div class="home">
    <div class="">
      <el-row class="row">
        <el-col :span="4">
          <el-select v-model="selected" placeholder="全部状态">
            <el-option label="全部状态" value=""></el-option>
            <el-option label="正常" value="0"></el-option>
            <el-option label="已停用" value="1"></el-option>
            <el-option label="已失效" value="2"></el-option>
            <el-option label="暂停中" value="3"></el-option> </el-select
        ></el-col>
        <el-col :span="8">
          <el-input
            placeholder="请输入搜索内容"
            v-model="searchText"
            suffix-icon="el-icon-search"
          ></el-input
        ></el-col>
        <el-col :span="8">
          <el-button class="setting-btn" type="primary" @click="login"
            >搜索</el-button
          >
          <router-link to="/setVipCard">
            <el-button class="setting-btn" type="primary"
              >设置会员卡</el-button
            ></router-link
          ></el-col
        >
      </el-row>
    </div>
    <div class="member-table">
      <el-table
        :data="tableData"
        style="width: 100%"
        table-layout="fixed"
        border
      >
        <el-table-column
          prop="cardName"
          label="会员卡"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="userName"
          label="绑定会员"
          width="100px"
        ></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column
          prop="remainAmount"
          label="余额"
          width="100px"
        ></el-table-column>
        <el-table-column prop="cardStatus" label="状态" width="100px">
          <!-- 0正常 1 停用 2 失效 3 暂停 -->
          <template #default="{ row }">
            <el-tag v-if="row.cardStatus == 0">正常</el-tag>
            <el-tag v-else-if="row.cardStatus == 1" type="danger">停用</el-tag>
            <el-tag v-else-if="row.cardStatus == 2" type="info">失效</el-tag>
            <el-tag v-else type="warning">暂停</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              type="text"
              size="small"
              @click="(dialogVisible = true), details(row.id)"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="(dialogFormVisible = true), renew(row.id)"
              >续费</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="debit(row.id), (dialogFormVisible = true)"
              >扣费</el-button
            >
            <el-button type="text" size="small" v-if="row.cardStatus==0" @click="changedState(row.cardStatus,row.id)">停用</el-button>
            <el-button type="text" size="small" v-if="row.cardStatus==1" @click="changedState(row.cardStatus,row.id)">启用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 查看详情 -->
    <el-dialog v-model="dialogVisible" title="详情" width="40%">
      <el-row>
        <el-col :span="4"><div class="deep">用户</div></el-col>
        <el-col :span="8"
          ><div class="next">{{ detailsList.username }}</div></el-col
        >
        <el-col :span="4"><div class="deep">电话</div></el-col>
        <el-col :span="8"
          ><div class="next">{{ detailsList.phone }}</div></el-col
        >
      </el-row>
      <el-row>
        <!-- 0 次卡 1 期卡 2 储值卡 -->
        <el-col :span="4"><div class="deep">会员卡类型</div></el-col>
        <el-col :span="8"
          ><div class="next">
            {{
              detailsList.cardType == 0
                ? "次卡"
                : detailsList.cardType == 1
                ? "期卡"
                : "储值卡"
            }}
          </div></el-col
        >
        <el-col :span="4"><div class="deep">会员卡名称</div></el-col>
        <el-col :span="8"
          ><div class="next">{{ detailsList.cardName }}</div></el-col
        >
      </el-row>
      <el-row>
        <!-- 0正常 1 停用 2 失效 3 暂停 cardStatus-->
        <el-col :span="4"><div class="deep">状态</div></el-col>
        <el-col :span="8"
          ><div class="next">
            {{
              detailsList.cardStatus == 0
                ? "正常"
                : detailsList.cardStatus == 1
                ? "停用"
                : detailsList.cardStatus == 2
                ? "失效"
                : "暂停"
            }}
          </div></el-col
        >
        <el-col :span="4"><div class="deep">到期时间</div></el-col>
        <el-col :span="8"
          ><div class="next">{{ detailsList.createTime }}</div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="4"><div class="deep">剩余次数</div></el-col>
        <el-col :span="8"
          ><div class="next">
            {{
              detailsList.expirationDay == -1
                ? "无限制"
                : detailsList.expirationDay
            }}
          </div></el-col
        >
        <el-col :span="4"><div class="deep">售价</div></el-col>
        <el-col :span="8"
          ><div class="next">{{ detailsList.amountReceived }}</div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="4"><div class="deep">场馆</div></el-col>
        <el-col :span="8"
          ><div class="next">{{ detailsList.venuesName }}</div></el-col
        >
        <el-col :span="4"><div class="deep">备注</div></el-col>
        <el-col :span="8"
          ><div class="next">{{ detailsList.remark }}</div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="4"><div class="deep">支付方式</div></el-col>
        <el-col :span="8"
          ><div class="next">{{ detailsList.paymentMethod }}</div></el-col
        >
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 续费弹出框 -->
    <el-dialog v-model="dialogFormVisible" title="续费" width="40%">
      <el-form :model="renewList">
        <el-form-item label="消费说明" label-width="100px">
          <el-input v-model="renewList.illustrate" autocomplete="off" />
        </el-form-item>
        <el-form-item label="消费金额" label-width="100px">
          <el-input v-model="renewList.money" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="(dialogFormVisible = false), submit()"
          >
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<script setup lang="ts">
import { computed, ref, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import vipCard from "../../store/vipCard";
import userManagement from "../../hooks/userManagement";
import { fa } from "element-plus/es/locale";


const dialogVisible = ref(false); //查看详情
const dialogFormVisible = ref(false)//续费
const selected = ref("");
const searchText = ref("");

const store = vipCard();
const limit = 10;
const page = 1;
const state = 0;


const renewList = {
  illustrate :'',
  money:""
};
const tableData = computed(() => store.getUserVipCardPageList);//tore.getUserCardInfo
let detailsList = {
  id: "",
    username: "",
    phone: "",
    cardType: "",
    cardName: "",
    createTime: "",
    cardStatus: "",
    expirationDay: "",
    remainCount: "",
    amountReceived: "",
    remainAmount: "",
    venuesName: "",
    remark: "",
    paymentMethod: ""
};

// 加载
const login = () => {
let cardStatus = Number(selected.value);
let queryName = searchText.value;
  userManagement.userVipCardPageList(
    cardStatus,
    limit,
    page,
    queryName
  );
};

// 查看详情
const details=(id:number)=>{
  // console.log(123);
  console.log(id);
  userManagement.getUserCardInfo(id)
  console.log("text",store.getUserCardInfo);
  detailsList  = computed(()=>store.getUserCardInfo)
}

// 续费
const renew=(id:number)=>{
  const state = 0
  const renewList = {
  illustrate :'',
  money:""
}
  console.log(id);
  const userCardId = id
  
}

//扣费
const debit = (id:number)=>{
  const state = 1;
  const renewList = {
  illustrate :'',
  money:""
  }

}

// 提交
const submit = ()=>{
  let change = "";
  let illustrate = renewList.illustrate;
  let money = Number(renewList.money);
  // userManagement.renewal(change,illustrate,money,userCardId)
}

//改变状态
const changedState = (state,id)=>{
  let cardStatus = (state==0?1:0);
  userManagement.changeUserVipCardStatus(cardStatus,id)

}

onMounted(() => {
  login();
});


</script>

<style scoped>
.member-table {
  width: 100%;
}
.home {
  padding: 20px;
}

.setting-btn {
  margin-left: 20px;
}
.deep {
  height: 45px;
  line-height: 45px;
  padding-left: 20px;
  background-color: #f9fafd;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
}
.next {
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  height: 45px;
  line-height: 45px;
  padding-left: 20px;
}
.row {
  height: 50px;
}
</style>
